<template>
    <div>
        <div class="card">
            <div class="card-header">会员注册</div>
            <div class="card-body">
                <div class="form-group">
                    <label for="name">昵称</label>
                    <input
                        type="text"
                        id="name"
                        name="name"
                        class="form-control"
                        :class="{'is-invalid':errors.name}"
                        @focus="errors.name=''"
                        placeholder="请输入昵称"
                        v-model="name"
                    />
                    <strong class="invalid-feedback" v-if="errors.name">{{errors.name}}</strong>
                </div>
                <div class="form-group">
                    <label for="account">邮箱/手机号</label>
                    <input
                        type="text"
                        id="account"
                        name="account"
                        class="form-control"
                        :class="{'is-invalid':errors.account}"
                        @focus="errors.account=''"
                        placeholder="请输入邮箱或手机号"
                        v-model="account"
                    />
                    <strong class="invalid-feedback" v-if="errors.account">{{errors.account}}</strong>
                </div>
                <div class="form-group">
                    <label for="captcha">图形验证码</label>
                    <div class="input-group captcha" :class="{'is-invalid':errors.captcha}">
                        <input
                            type="text"
                            class="form-control"
                            id="captcha"
                            name="captcha"
                            placeholder="请输入图形验证码"
                            v-model="captcha"
                            @focus="errors.captcha=''"
                        />
                        <div class="input-group-append" tyle="cursor: pointer" @click="updateCaptcha">
                            <img :src="captchaImage" class="border"/>
                        </div>
                    </div>
                    <strong class="invalid-feedback" v-if="errors.captcha">{{ errors.captcha }}</strong>
                </div>
                <div class="form-group captcha">
                    <label for="code">验证码</label>
                    <div class="input-group mb-3" :class="{'is-invalid':errors.code}">
                        <input
                            type="text"
                            class="form-control"
                            placeholder="请输入验证码"
                            id="code"
                            name="code"
                            v-model="code"
                        />

                        <div class="input-group-append" @click="sendCode">
                            <span class="input-group-text" id="basic-addon2">发送验证码</span>
                        </div>
                    </div>
                    <strong class="invalid-feedback">{{errors.code}}</strong>
                </div>

                <el-divider>
                    <i class="el-icon-mobile-phone"></i>
                </el-divider>
                <div class="form-group">
                    <label for>密码</label>
                    <input
                        type="password"
                        class="form-control"
                        v-model="password"
                        :class="{'is-invalid':errors.password}"
                        @focus="errors.password=''"
                    />
                    <strong class="invalid-feedback" v-if="errors.password">{{ errors.password}}</strong>
                </div>
                <div class="form-group">
                    <label for>确认密码</label>
                    <input type="password" class="form-control" v-model="password_confirmation"/>
                </div>
            </div>
            <div class="card-footer text-muted d-flex justify-content-between align-items-center">
                <button class="btn btn-success" @click="onSubmit">注册</button>
                <div>
                    <a href="/login">登录</a> |
                    <a href>找回密码</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState} from "vuex";

    export default {
        props: {
            codeAction: {required: true}
        },

        data() {
            return {
                code: "",
                name: "",
                account: "",
                captcha: "",
                password: "",
                password_confirmation: "",
                captchaImage: "/captcha"
            };
        },
        computed: {
            ...mapState(["errors"])
        },
        methods: {
            updateCaptcha() {
                this.captchaImage = "/captcha?" + Math.random();
            },
            async sendCode() {
                await this.axios.post(this.codeAction, this.$data).finally(() => {
                    this.updateCaptcha(); //自动点击验证码
                });
            },
            async onSubmit() {
                await this.axios.post("register", this.$data);
                location.href = "/";
            }
        }
    };
</script>
<style lang="scss" scoped>
    .captcha {
        .input-group-append {
            cursor: pointer;
        }
    }
</style>
